<template>
  <aside class="aside-legend">
    <div class="legend-box" :class="isOpen ? '' : 'closed'">
      <h2 class="legend-title">实体类型</h2>
      <el-checkbox class="legend-check-all" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div class="divided"></div>
      <el-checkbox-group class="legend-group" v-model="checkEntityTypes" @change="handleCheckedEntityTypesChange">
        <el-checkbox class="legend-item" v-for="entityType in entityTypes" :label="entityType" :key="entityType">
          <i class="icon el-icon-delete-solid"></i>
          <span>{{entityType}}</span>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="toggle-btn" @click="isOpen = !isOpen">
      <i :class="isOpen ? 'el-icon-caret-right' : 'el-icon-caret-left'"></i>
    </div>
  </aside>
</template>

<script>
import { entityTypes } from './entityTypes.js'
import EventBus from '../EventBus'
import Bus from '../EventBus/events'

export default {
  name: 'Legend',
  data() {
    return {
      // 侧边栏是否开启
      isOpen: false,
      // checkbox 数据
      isIndeterminate: false,
      checkAll: true,
      entityTypes: entityTypes,
      checkEntityTypes: entityTypes
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkEntityTypes = val ? entityTypes : []
      this.isIndeterminate = false
      // 后续添加业务代码
      EventBus.$emit(Bus.LEGEND_CHANGE, {
        checkEntityTypes: this.checkEntityTypes
      })
    },
    handleCheckedEntityTypesChange(values) {
      let checkCount = values.length
      this.checkAll = checkCount === this.entityTypes.length
      this.isIndeterminate = checkCount > 0 && checkCount < this.entityTypes.length
      // 后续添加业务代码
      EventBus.$emit(Bus.LEGEND_CHANGE, {
        checkEntityTypes: this.checkEntityTypes
      })
    }
  }
}
</script>

<style lang="less">
.aside-legend {
  max-width: 240px;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #E8E8E8;
  }

  .legend-box {
    width: 200px;
    padding: 20px 12px;
    box-sizing: border-box;
    &.closed {
      display: none;
    }

    display: flex;
    flex-direction: column;

    .legend-title {
      font-size: 18px;
      font-weight: bold;
      color: #1c2d5a;
    }

    .legend-check-all {
      margin-top: 12px;

      .el-checkbox__label {
        font-size: 16px;
      }
    }

    .divided {
      margin: 8px 0;
      width: 80%;
      border-top: 1.5px solid #dddddd;
    }

    .legend-group {
      display: flex;
      flex-direction: column;

      .legend-item {
        margin: 6px 0;

        .icon {
          margin-right: 4px;
        }

        .el-checkbox__label {
          font-size: 16px;
          color: #6e7586;
        }
      }
    }
  }

  .toggle-btn {
    width: 16px;
    height: 100px;
    background-color: #3a72ff;
    border-radius: 10px 0 0 10px;
    font-size: 14px;
    color: white;
    cursor: pointer;
    position: absolute;
    left: -17px;
    // right: 0;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
  }
}
</style>